<template>
  <div>
    <Form ref="formInline" :model="params" inline>
      <FormItem>
        <Select v-model="params.project" clearable style="width:200px" placeholder="请选择项目" @on-change="changeParams">
          <Option v-for="item in projectList" :value="item.label" :key="item.label">{{ item.value }}</Option>
        </Select>
      </FormItem>
      <FormItem>
        <DatePicker type="daterange" placeholder="选择日期" style="width: 200px" v-model="params.date"
          @on-change="changeParams">
        </DatePicker>
      </FormItem>
      <FormItem>
        <Input @on-clear="clearWord" v-model="params.keyword" clearable placeholder="请输入患者姓名/编号" style="width: 250px"
          @on-enter="changeKeyword" />
      </FormItem>
      <FormItem>
        <Select :max-tag-count="2" multiple v-model="params.seeDoctorType" clearable style="width:220px"
          placeholder="请选择就诊分类" @on-change="changeParams">
          <Option v-for="item in seeDoctorList" :value="item.label" :key="item.label">{{ item.value }}</Option>
        </Select>
      </FormItem>
      <FormItem>
        <Select :max-tag-count="2" multiple v-model="params.registeredType" clearable style="width:250px"
          placeholder="请选择挂号分类" @on-change="changeParams">
          <Option v-for="item in registeredList" :value="item.label" :key="item.label">{{ item.value }}</Option>
        </Select>
      </FormItem>
      <FormItem>
        <Select :max-tag-count="2" multiple v-model="params.source" clearable style="width:250px"
          @on-change="changeParams" placeholder="请选择患者来源">
          <Option v-for="item in sourceList" :value="item.label" :key="item.label">{{ item.value
            }}
          </Option>
        </Select>
      </FormItem>
    </Form>
    <Table :columns="columns" :data="data" :loading="tableLoading" @on-sort-change="sortChange">
      <template slot-scope="{row}" slot="deal_status">
        <Tag v-if="row.deal_status=== '1'" color="success">已成交</Tag>
        <Tag v-if="row.deal_status=== '2'" color="error">未成交</Tag>
      </template>
      <template slot-scope="{row}" slot="medical_id">
        <Badge v-if="row.medical_str === '再消费'" status="processing" :text="row.medical_str" />
        <Badge v-if="row.medical_str === '初诊'" status="success" :text="row.medical_str" />
        <Badge v-if="row.medical_str === '复诊'" status="warning" :text="row.medical_str" />
      </template>
      <template slot-scope="{row}" slot="register_id">
        <Tag color="default">{{row.register_str}}</Tag>
      </template>
    </Table>
    <div style="display: flex;justify-content: center;margin-top: 20px;">
      <Page :total="total" show-elevator show-sizer @on-change="changePage" @on-page-size-change="changePageSize" />
    </div>
  </div>
</template>
<script>
  import { getSourceListInfo, getSourceListOne } from "@api/TApi/index.js"
  export default {
    created() {
      this._getSourceListInfo()
    },
    data() {
      return {
        tableLoading: false,
        total: 0,
        seeDoctorList: [],
        registeredList: [],
        sourceList: [],
        projectList: [],
        params: {
          date: [],
          page: 1,
          pageSize: 10,
          seeDoctorType: [],
          registeredType: [],
          source: [],
          keyword: "",
          project: "",
          pay_time_order: 0,
          total_sort: 0,
          voidmoney_sort: 0,
          receivable_sort: 0,
          arrearmoney_sort: 0,
          paymoney_sort: 0,
          create_order_time_sort: 0,
          create_archives_time_sort: 0,
        },
        columns: [
          {
            title: '收费时间',
            key: 'pay_time',
            minWidth: 150,
            sortable: 'custom'
          },
          {
            title: '患者编号',
            key: 'patient_card_id',
            minWidth: 120,

          },
          {
            title: '患者姓名',
            key: 'user_name',
            minWidth: 120,
          },
          {
            title: '小计',
            key: 'total',
            minWidth: 120,
            sortable: 'custom'

          },
          {
            title: '免除',
            key: 'voidmoney',
            minWidth: 120,
            sortable: 'custom'
          },
          {
            title: '应收',
            key: 'receivable',
            minWidth: 120,
            sortable: 'custom'

          },
          {
            title: '欠费',
            key: 'arrearmoney',
            minWidth: 120,
            sortable: 'custom'

          },
          {
            title: '缴费',
            key: 'paymoney',
            minWidth: 120,
            sortable: 'custom'

          },
          {
            title: '就诊分类',
            slot: 'medical_id',
            minWidth: 120,
          },
          {
            title: '挂号分类',
            slot: 'register_id',
            minWidth: 120,
          },
          {
            title: '成交情况',
            slot: 'deal_status',
            minWidth: 120,
          },
          {
            title: '接诊咨询',
            key: 'treated_counselor',
            minWidth: 120,
          },
          {
            title: '患者来源',
            key: 'source_str',
            minWidth: 120,
          },
          {
            title: '来源子分类',
            key: 'subdivided_channels',
            minWidth: 150,
          },
          {
            title: '开单人',
            key: 'create_order_belong_member',
            minWidth: 120,
          },
          {
            title: '开单时间',
            key: 'create_order_time',
            minWidth: 200,
            sortable: 'custom'
          },
          {
            title: '介绍人',
            key: 'introducer',
            minWidth: 120,
          },
          {
            title: '建档人',
            key: 'create_belong_member',
            minWidth: 120,
          },
          {
            title: '建档时间',
            key: 'create_archives_time',
            minWidth: 200,
            sortable: 'custom'
          },
        ],
        data: [

        ],
      }
    },
    methods: {
      sortChange(obj) {
        this.params.pay_time_order = 0
        this.params.total_sort = 0
        this.params.voidmoney_sort = 0
        this.params.receivable_sort = 0
        this.params.arrearmoney_sort = 0
        this.params.paymoney_sort = 0
        this.params.create_order_time_sort = 0
        this.params.create_archives_time_sort = 0
        let { key, order } = obj;
        let sortNum
        if (order === 'asc') {
          sortNum = 1
        } else if (order === "desc") {
          sortNum = 2
        } else {
          sortNum = 0
        }
        if (key === "pay_time") {
          this.params.pay_time_order = sortNum
        } else if (key === "total") {
          this.params.total_sort = sortNum
        } else if (key === "voidmoney") {
          this.params.voidmoney_sort = sortNum
        } else if (key === "receivable") {
          this.params.receivable_sort = sortNum
        } else if (key === "arrearmoney") {
          this.params.arrearmoney_sort = sortNum
        } else if (key === "create_order_time") {
          this.params.create_order_time_sort = sortNum
        } else if (key === "create_archives_time") {
          this.params.create_archives_time_sort = sortNum
        } else if (key === "paymoney") {
          this.params.paymoney_sort = sortNum
        }
        this._getSourceListOne()
      },
      clearWord() {
        this.params.page = 1
        this._getSourceListOne()
      },
      changeKeyword() {
        this.params.page = 1
        this.params.pageSize = 10
        this.params.date = []
        this.params.seeDoctorType = []
        this.params.registeredType = []
        this.params.source = []
        this.params.project = ""
        this.params.register_time_order = 0
        this.params.age_sort = 0
        this.params.deal_status_sort = 0
        this.params.re_pay_sort = 0
        this.params.last_pay_sort = 0
        this._getSourceListOne()
      },
      changeParams() {
        this.params.page = 1
        this._getSourceListOne()
      },
      _getSourceListInfo() {
        getSourceListInfo().then(res => {
          this.seeDoctorList = res.medical_list
          this.registeredList = res.register_list
          this.sourceList = res.source_list
          this.projectList = res.project_list
          this.params.project = res.project_list[0].label
          this._getSourceListOne()
        })
      },
      changePageSize(pageSize) {
        this.params.pageSize = pageSize
        this._getSourceListOne()
      },
      changePage(page) {
        this.params.page = page
        this._getSourceListOne()
      },
      _getSourceListOne() {
        let params = {
          page: this.params.page,
          pageSize: this.params.pageSize,
          project_name_id: this.params.project,
          start_time: this.params.date[0] ? this.$Date(this.params.date[0]).format("YYYY-MM-DD") : "",
          end_time: this.params.date[1] ? this.$Date(this.params.date[1]).format("YYYY-MM-DD") : "",
          medical_id: this.params.seeDoctorType.length ? this.params.seeDoctorType.join(',') : "",
          register_id: this.params.registeredType.length ? this.params.registeredType.join(',') : "",
          source_id: this.params.source.length ? this.params.source.join(',') : "",
          keyword: this.params.keyword,
          pay_time_order: this.params.pay_time_order,
          total_sort: this.params.total_sort,
          voidmoney_sort: this.params.voidmoney_sort,
          receivable_sort: this.params.receivable_sort,
          arrearmoney_sort: this.params.arrearmoney_sort,
          paymoney_sort: this.params.paymoney_sort,
          create_order_time_sort: this.params.create_order_time_sort,
          create_archives_time_sort: this.params.create_archives_time_sort,
        }
        this.tableLoading = true
        getSourceListOne(params).then(res => {
          this.total = res.total
          this.data = res.list
          this.tableLoading = false
        })
      },
    }
  }
</script>